<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="8">
        <userInfo/>
      </el-col>
    </el-row>
    <el-row>
      <app-list />
    </el-row>
    <el-row>
      <el-card class="dashboard-card count-board" shadow="hover">
        <div slot="header">
          <span class="count-board-title">{{ $t('dash.PersonalWorkbenchKanban') }}</span>
        </div>
        <div class="count-board-list">
          <div v-for="(item, index) in countList" :key="index" class="count-board-item">
            <div class="count-title">
              <div class="count-title-img-box">
                <img :src="item.icon">
              </div>
              <div style="margin-left: 6px; line-height: 24px;">{{ item.title }}</div>
            </div>
            <div class="count-box">
              <div class="count-left">
                <span>{{ item.textL }}</span>
                <div class="count-number" :style="{ 'color': item.textColorL }">{{ item.countL }}</div>
              </div>
              <div class="count-right">
                <span>{{ item.textR }}</span>
                <div class="count-number">{{ item.countR }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-row>
    <el-row>
      <div class="charts-box">
        <div class="chart-left-box">
          <el-card class="dashboard-card chart-card" shadow="hover">
            <div slot="header">
              <span class="chart-title">{{ $t('dash.Procurementsituation') }}</span>
            </div>
            <div class="top-boards">
              <div class="board-item">
                <span class="icon-box">
                  <svg-icon icon-class="jinqian" />
                </span>
                <span style="margin-left: 4px; margin-right: 4px;">{{ $t('dash.Procurementamount') }}</span>
                <el-tooltip :content="datainfo.yearSalePrice">
                  <span class="board-item-number">{{ datainfo.yearSalePrice }}</span>
                </el-tooltip>
              </div>
              <div class="board-item" style="margin-left: 6px;">
                <span class="icon-box" style="font-size: 12px;">
                  <svg-icon icon-class="dadanicon" style="transform: translate(0.5px);" />
                </span>
                <span>{{ $t('dash.Totalannualorders') }}</span>
                <span class="board-item-number">{{ datainfo.yearOrderCount }}</span>
              </div>
            </div>
            <div class="line-chart-box">
              <div class="top-date-buttons">
                <div class="date-btn" :class="{'active':isactive == '0' }" @click="currentgetLastWeek(0)">
                  {{ $t('dash.Thisweek') }}
                </div>
                <div class="date-btn" :class="{'active':isactive == '1' }" @click="currentgetLastMonth(1)">
                  {{ $t('dash.Thismonth') }}
                </div>
                <div class="date-btn" :class="{'active':isactive == '2' }" @click="currentgetLastYear(2)">
                  {{ $t('dash.Thisyear') }}
                </div>
              </div>
              <div id="getImg" />
            </div>
          </el-card>
        </div>
        <div class="chart-right-box">
          <el-card class="dashboard-card chart-card" shadow="hover">
            <div slot="header">
              <span class="chart-title">{{ $t('dash.Listofprocurement') }}</span>
            </div>
            <div class="top-board">
              <span>{{ $t('dash.ListofprocurementManth') }}</span>
              <span class="lev">{{ $t('dash.Level1') }}: </span><span class="num">{{ datainfo.firstLevelCount }}</span>
              <span class="lev">{{ $t('dash.Level2') }}: </span><span class="num">{{ datainfo.secondLevelCount }}</span>
              <span class="lev">{{ $t('dash.Level3') }}: </span><span class="num">{{ datainfo.thirdLevelCount }}</span>
            </div>
            <div class="bar-chart-box">
              <div class="top-date-buttons">
                <div class="date-btn" :class="{'active':isactivetwo == '0' }" @click="purchase('week')">
                  {{ $t('dash.Thisweek') }}
                </div>
                <div class="date-btn" :class="{'active':isactivetwo == '1' }" @click="purchase('month')">
                  {{ $t('dash.Thismonth') }}
                </div>
                <div class="date-btn" :class="{'active':isactivetwo == '2' }" @click="purchase('year')">
                  {{ $t('dash.Thisyear') }}
                </div>
              </div>
              <div id="imgLine" />
            </div>
          </el-card>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
// import * as echarts from 'echarts';
import { mapGetters } from 'vuex'
import goodsLanguage from './dashboard.js'
const viewName = 'dash'
import userInfo from './components/user-info-card'
import myWork from './components/my-work-list'
import appList from './components/app-list.vue'
import {
  getOrderWaitCount,
  getOrderRatingCount,
  getOrderCancelCount,
  getOrderSubmintCount,
  getcount,
  getdashboard,
  getinfo,
  getLastWeek,
  getLastMonth,
  getLastYear,
  getLastYearcompany,
  getLastMonthcompany,
  getLastWeekcompany
} from '@/api/dashboard'

export default {
  name: 'Dashboard',
  components: {
    userInfo,
    myWork,
    appList
  },
  data() {
    return {
      notTntegralSub: true,
      orderWait: 0,
      orderRating: 0,
      orderCancel: 0,
      orderSubmint: 0,
      personallist: {},
      myorderlist: {},
      purchaselist: [],
      purchaselistprice: [],
      purchaselistbuyNum: [],
      prices: [],
      returnGood: [],
      saleNumber: [],
      datas: [],
      isactive: '1',
      isactivetwo: '1',
      datainfo: {},
      leftdataec: {}
    }
  },
  mounted() {
    this.getImg()
    this.imgLine()
  },
  computed: {
    ...mapGetters(['name']),
    lang: {
      get() {
        return this.$store.state.app.language
      },
      set(lang) {
        this.$i18n.locale = lang
        this.$store.dispatch('app/setLanguage', lang)
      }
    },
    countList() {
      return [
        {
          icon: require('@/assets/dashboard/daiban.png'),
          title: this.$t('dash.Mytodolist'),
          textL: this.$t('dash.untreated'),
          countL: this.personallist.noApprovalNum,
          textColorL: '#2D65FD',
          textR: this.$t('dash.NewToday'),
          countR: this.personallist.todayNoApprovalNum
        },
        {
          icon: require('@/assets/dashboard/dingdan.png'),
          title: this.$t('dash.MyOrder'),
          textL: this.$t('dash.Tobesubmit'),
          countL: this.myorderlist.orderNum,
          textColorL: '#58C7EF',
          textR: this.$t('dash.NewToday'),
          countR: this.myorderlist.todayOrderNum
        },
        {
          icon: require('@/assets/dashboard/fahuo.png'),
          title: this.$t('dash.ShippingOrder'),
          textL: this.$t('dash.untreated'),
          countL: this.myorderlist.sendOrderNum,
          textColorL: '#F4993E',
          textR: this.$t('dash.NewToday'),
          countR: this.myorderlist.todaySendOrderNum
        },
        {
          icon: require('@/assets/dashboard/shouhou.png'),
          title: this.$t('dash.aftersalesorder'),
          textL: this.$t('dash.untreated'),
          countL: this.myorderlist.afterSaleNum,
          textColorL: '#F65587',
          textR: this.$t('dash.NewToday'),
          countR: this.myorderlist.todayAfterSaleNum
        },
        {
          icon: require('@/assets/dashboard/fengkong.png'),
          title: this.$t('dash.riskcontrolwarning'),
          textL: this.$t('dash.untreated'),
          countL: 0,
          textColorL: '#F06666',
          textR: this.$t('dash.NewToday'),
          countR: 0
        }
      ]
    }
  },
  created() {
    this.getOrderCount()
    const subType = localStorage.getItem('subType')
    this.notTntegralSub = subType !== 'integral_sub'
    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
      this.$i18n.mergeLocaleMessage('en', goodsLanguage.en)
      this.$i18n.mergeLocaleMessage('zh', goodsLanguage.zh)
    }
    this.initData()
    this.myorder()
    this.purchase('month')
    this.currentgetLastMonth('1')
    const tabname = this.$t('shopping.Personalworkbench')
    localStorage.setItem('tabname', JSON.stringify(tabname))
  },
  methods: {
    more() {
      const routeData = this.$router.resolve({
        path: '/approval/morePages'
      })
      window.open(routeData.href, '_blank')
    },
    imgLine() {
      var chartDom = document.getElementById('imgLine')
      var myChart = echarts.init(chartDom)
      var option
      var dataZoom = [
        {
          type: 'slider', // 滑动条型数据区域缩放组件
          realtime: true, // 拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
          start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
          // end: 10,  // 数据窗口范围的结束百分比。范围是：0 ~ 100
          height: 4,
          endValue: 4, // 数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
          fillerColor: '#B8D0FF', // 滚动条颜色
          borderColor: 'rgba(17, 100, 210, 0.1)',
          handleSize: 0, // 两边手柄尺寸
          showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          top: '96%', // 组件离容器上侧的距离
          zoomLock: true // 是否只平移不缩放
          // moveOnMouseMove:true, //开启鼠标移动窗口平移
          // zoomOnMouseWheel :true, //开启鼠标滚轮缩放
        },
        {
          type: 'inside', // 内置型数据区域缩放组件
          start: 0,
          end: 100,
          endValue: 100, // 最多12个
          zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
          moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
          moveOnMouseMove: true // 开启鼠标移动窗口平移
        }
      ]
      var option = {
        legend: {
          data: [this.$t('dash.Purchaseamount'), this.$t('dash.TotalPurchases')],
          left: 'left',
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          axisLabel: { interval: 0 },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          boundaryGap: true,
          nameTextStyle: {
            align: 'center'
          },
          data: this.purchaselist
        },
        dataZoom: dataZoom,
        yAxis: [
          {
            // max: 1000000, // 最大值
            min: 0, // 最小值
            // interval:5,//间隔
            type: 'value',
            data: [0, 250, 500, 750, 1000],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            name: this.$t('dash.purchaseamountUnit')
          },
          {
            // max: 1000, // 最大值
            min: 0, // 最小值
            // interval:200,//间隔
            type: 'value',
            data: [0, 250, 500, 750, 1000],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            splitLine: { show: false },
            name: this.$t('dash.totalPurchasesUnit')
          }
        ],
        grid: {
          left: '0%',
          right: '3%',
          bottom: '4%',
          containLabel: true
        },
        series: [
          {
            name: this.$t('dash.Purchaseamount'),
            type: 'bar',
            data: this.purchaselistprice,
            color: '#5B8FF9',
            barWidth: '10'
          },
          {
            name: this.$t('dash.TotalPurchases'),
            type: 'bar',
            yAxisIndex: 1,
            data: this.purchaselistbuyNum,
            color: '#F4993E',
            barWidth: '10'
          }
        ]
      }
      option && myChart.setOption(option)
    },
    getImg() {
      var chartDom = document.getElementById('getImg')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        // title: {
        // x: "center",
        // y: "center"
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.$t('dash.PurchaseAmount'), this.$t('dash.Numberoforders')],
          left: 'left'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          // feature: {
          // saveAsImage: {}
          // }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          nameTextStyle: {
            align: 'center'
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          data: this.datas
        },
        yAxis: [
          {
            // max: 1000, // 最大值
            min: 0, // 最小值
            // interval: 250, // 间隔
            type: 'value',
            data: [0, 250, 500, 750, 1000],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            name: this.$t('dash.purchaseAmountUnit')
          },
          {
            // max: 1000, // 最大值
            min: 0, // 最小值
            // interval: 250, // 间隔
            type: 'value',
            data: [0, 250, 500, 750, 1000],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            splitLine: { show: false },
            name: this.$t('dash.numberofordersUnit')
          }
        ],
        series: [
          {
            name: this.$t('dash.PurchaseAmount'),
            type: 'line',
            color: '#5AD8A6',
            data: this.prices,
            smooth: true
          },
          {
            name: this.$t('dash.Numberoforders'),
            type: 'line',
            yAxisIndex: 1,
            color: '#5B8FF9',
            data: this.saleNumber,
            smooth: true
          }
        ]
      }
      option && myChart.setOption(option)
    },
    getOrderCount() {
      getOrderWaitCount().then((res) => {
        this.orderWait = res
      })
      getOrderRatingCount().then((res) => {
        this.orderRating = res
      })
      getOrderCancelCount().then((res) => {
        this.orderCancel = res
      })
      getOrderSubmintCount().then((res) => {
        this.orderSubmint = res
      })
    },
    initData() {
      getcount().then((res) => {
        this.personallist = res.data
      })
    },
    myorder() {
      getdashboard().then((res) => {
        this.myorderlist = res
      })
    },
    purchase(val) {
      if (val === 'week') {
        this.isactivetwo = '0'
      } else if (val === 'month') {
        this.isactivetwo = '1'
      } else if (val === 'year') {
        this.isactivetwo = '2'
      }
      getinfo({ type: val }).then((res) => {
        this.datainfo = res.data
        if(this.datainfo.yearSalePrice) {
          this.datainfo.yearSalePrice = parseFloat(this.datainfo.yearSalePrice).toFixed(2)
        } else {
          this.datainfo.yearSalePrice = '0'
        }
        const newobj = []
        const newobjprice = []
        const newobjbuyNum = []
        res.data.list.forEach((item) => {
          newobj.push(item.parentCategoryName)
          newobjprice.push(item.totalPrice)
          newobjbuyNum.push(item.buyNumber)
        })
        this.purchaselist = newobj
        this.purchaselistprice = newobjprice
        this.purchaselistbuyNum = newobjbuyNum
        this.imgLine()
      })
    },
    currentgetLastWeek(val) {
      this.isactive = val
      const getuser = this.$store.getters.user.comSubCode === 'cs_0220' ? getLastWeekcompany : getLastWeek
      getuser().then((res) => {
        this.datas = []
        this.prices = []
        this.returnGood = []
        this.saleNumber = []
        res.data.forEach((item) => {
          this.datas.push(item.week)
          this.prices.push(item.orderTotalMoney)
          this.returnGood.push(item.returnGoodsNumber)
          this.saleNumber.push(item.orderCount)
        })
        this.getImg()
      })
    },
    currentgetLastMonth(val) {
      this.isactive = val
      const getuser = this.$store.getters.user.comSubCode === 'cs_0220' ? getLastMonthcompany : getLastMonth
      getuser().then((res) => {
        this.leftdataec = res.data
        this.datas = []
        this.prices = []
        this.returnGood = []
        this.saleNumber = []
        res.data.forEach((item) => {
          this.datas.push(item.yearMonth)
          this.prices.push(item.orderTotalMoney)
          this.returnGood.push(item.returnGoodsNumber)
          this.saleNumber.push(item.orderCount)
        })
        this.getImg()
      })
    },
    currentgetLastYear(val) {
      this.isactive = val
      const getuser = this.$store.getters.user.comSubCode === 'cs_0220' ? getLastYearcompany : getLastYear
      getuser().then((res) => {
        this.leftdataec = res.data
        this.datas = []
        this.prices = []
        this.returnGood = []
        this.saleNumber = []
        res.data.forEach((item) => {
          this.datas.push(item.year)
          this.prices.push(item.orderTotalMoney)
          this.returnGood.push(item.returnGoodsNumber)
          this.saleNumber.push(item.orderCount)
        })
        this.getImg()
      })
    }
  }
}
</script>

<style lang="scss">
.dashboard-card.el-card {
  .el-card__header {
    border-bottom: none;
    padding: 16px 16px 12px;
  }

  .el-card__body {
    padding: 0 16px 16px;
  }
}
</style>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.left {
  margin: 0px 20px 0px 20px;
}

.right {
  margin: 20px 20px 0px 20px;
}

.count-board {
  width: 960px;
  margin-left: 14px;
  margin-bottom: 20px;
  border-radius: 10px;

  .count-board-title {
    font-family: SourceHanSansCN-Bold;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 700;
  }

  .count-board-list {
    display: flex;
    padding: 0 4px;

    .count-board-item {
      width: 178px;
      margin-right: 8px;
      padding: 12px 0;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      font-size: 14px;
      background: #F8F8FA;
      border-radius: 8px;

      &:last-child {
        margin-right: 0;
      }

      .count-title {
        display: flex;
        margin-left: 12px;

        .count-title-img-box {
          width: 24px;
          height: 24px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .count-box {
        display: flex;
        margin-top: 18px;

        .count-left,
        .count-right {
          width: 50%;
          text-align: center;

          .count-number {
            margin-top: 14px;
            text-align: center;
            font-family: SourceHanSansCN-Bold;
            font-size: 18px;
            font-weight: 500;
          }
        }

        .count-left {
          border-right: 0.5px dashed rgba(228, 228, 236, 1);
        }
      }
    }

  }
}

.charts-box {
  display: flex;
  width: 960px;
  margin-left: 14px;
  margin-bottom: 20px;

  .chart-left-box,
  .chart-right-box {
    width: 50%;

    .chart-card {
      border-radius: 10px;

      .chart-title {
        font-family: SourceHanSansCN-Bold;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 700;
      }
    }
  }

  .chart-left-box {
    margin-right: 16px;

    .top-boards {
      display: flex;

      .board-item {
        font-family: SourceHanSansCN-Regular;
        width: 50%;
        height: 42px;
        color: white;
        background-color: $themeColor;
        border: $themeColor;
        border-radius: 4px;
        font-size: 12px;
        padding: 10px 12px;

        .icon-box {
          // margin-left: 13px;
          display: inline-block;
          width: 24px;
          height: 24px;
          background: white;
          border-radius: 50%;
          line-height: 24px;
          text-align: center;
          color: $themeColor;
          font-size: 16px;
          vertical-align: middle;
        }

        .board-item-number {
          display: inline-block;
          width: 72px;
          font-size: 16px;
          // font-weight: 700;
          vertical-align: middle;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

  }

  .chart-right-box {
    .top-board {
      width: 100%;
      height: 42px;
      border-radius: 4px;
      color: #fff;
      background-color: $themeColor;
      padding: 14px 12px;
      font-size: 12px;

      >span {
        vertical-align: middle;

        &.lev {
          margin-left: 12px;
          font-size: 14px;
        }

        &.num {
          display: inline-block;
          width: 50px;
          font-size: 16px;
          // font-weight: 700;
        }
      }
    }
  }
}

.line-chart-box,
.bar-chart-box {
  position: relative;
  width: 100%;
  height: 261px;
  margin-top: 10px;

  .top-date-buttons {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;

    .date-btn {
      width: 45px;
      height: 22px;
      line-height: 20px;
      text-align: center;
      color: gainsboro;
      font-size: 12px;
      border-radius: 3px;
      border: 1px solid gainsboro;
      font-weight: 500;

      &:not(:first-child) {
        margin-left: 7px;
      }

      &:hover,
      &.active {
        border-color: $themeColor;
        color: $themeColor;
        cursor: pointer;
      }

    }
  }
}

#getImg {
  width: 100%;
  height: 100%;
}

#imgLine {
  width: 100%;
  height: 100%;
}
</style>
